<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <link th:href="@{/css/update.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('新增测试')" />
    <link th:href="@{/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet" type="text/css">

</head>
<body class="">
    <div class="main-content ">
        <form class="form-horizontal" id="form-test-add">
        <div class="row">
            <div class="col-sm-6">

                <div class="form-group">
                    <label class="col-sm-3 control-label">名称：</label>
                    <div class="col-sm-8">
                        <input name="name" class="form-control" type="text">
                    </div>
                </div>

            </div>



            <div class="col-sm-6">

                <div class="form-group">
                    <label class="col-sm-3 control-label">年龄：</label>
                    <div class="col-sm-8">
                        <input name="age" class="form-control" type="text">
                    </div>
                </div>

            </div>

        </div>
            <div class="row">
                <div class="col-sm-6">
                <div class="ibox-content">
                    <div class="form-group">
                        <label class="font-noraml">简单示例</label>
                        <div class="file-loading">
                            <input class="file" id="fileinput-demo-one" type="file" multiple data-min-file-count="1" data-theme="fas">
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                        <div class="form-group">
                            <label class="font-noraml">多文件上传</label>
                            <div class="file-loading">
                                <input id="fileinput-demo-1" type="file" multiple>
                            </div>
                        </div>

                </div>
            </div>


            <div id="summernote"></div>

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>
    <script th:src="@{/ajax/libs/summernote/summernote.js}" type="text/javascript"></script>
    <script type="text/javascript" th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}" ></script>
    <script type="text/javascript">
        var prefix = ctx + "netintech/test"
        $("#form-test-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-test-add').serialize());
            }
        }

        $(document).ready(function () {
            $("#fileinput-demo-one").fileinput({
                language: 'zh',
                preferIconicPreview: true,
            });

            // $("#fileinput-demo-1").fileinput({
            //     language: 'zh',
            //     'theme': 'explorer-fas',
            //     'uploadUrl': '#',
            //     overwriteInitial: false,
            //     dropZoneEnabled: false
            // });

            var control = $('#fileinput-demo-1');
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: prefix + '/upload', //上传的地址
                deleteUrl: prefix + '/removeFile',//删除图片地址
                //allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: true,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                preferIconicPreview: true,
                overwriteInitial: false,//覆盖初始化
                showRemove: false, //是否显示清除按钮
                initialPreview: [ "<img src='/img/profile.jpg' class='file-preview-image'>", "<img src='/img/top.png' class='file-preview-image'>"],
                initialPreviewConfig: [ { caption: "图片1", size: 20, url:prefix + '/removeFile',key: '5'}, { url:prefix + '/removeFile',key: '6' } ]
            });
            //files为fileinput控件ID，
            $('#fileinput-demo-1').on('fileuploaded', function (e, data, previewId, index) {
                //在上传成功事件中将服务器返回的所需数据，添加到该文件对应的div中
                console.log(data.response.data)
                $('#' + previewId).attr('fileid', data.response.data);
            }).on('filesuccessremove', function (event, previewId, extra) {
                //在移除事件里取出所需数据，并执行相应的删除指令
                let id = $('#' + previewId).attr('fileid');
                deleteFile(id);
            });

            // //同步上传返回结果处理
            // $("#fileinput-demo-1").on("filebatchuploadsuccess", function (event, data, previewId, index) {
            //     console.log(previewId);
            //     $('#' + previewId).attr('fileid', data.response.data);
            // }).on('filesuccessremove', function (event, previewId, extra) {
            //     //在移除事件里取出所需数据，并执行相应的删除指令
            //     let id = $('#' + previewId).attr('fileid');
            //     deleteFile(id);
            // });

            $('#summernote').summernote({
                minHeight: 500,
                //tabsize: 2,
                lang: 'zh-CN',
                width: 980,
                //回调函数
                callbacks:{//回调函数，重写onImageUpload方法
                    onImageUpload: function(files) {
                        sendFile(this,files[0]);
                    },
                    onMediaDelete: function (target) {
                        var imgSrc = target.context.currentSrc;
                        var data = new FormData();
                        data.append("imgSrc", imgSrc);
                        console.log(imgSrc)
                        $.ajax({
                            data: data,
                            type: "POST",
                            url: "",
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: function (data) {
                                console.log(data);
                            }
                        });
                    }
                }
            });
        });

            function deleteFile(ids){
                console.log(ids)
                var formdata = new FormData();
                formdata.append("key", ids);
                $.ajax({
                    url: prefix + '/removeFile',
                    data: formdata,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function(result) {

                    }
                })
            }


    </script>
</body>
</html>